<template>
  <div class="userManagement">
    <div>
      <el-form :inline="true" :model="form" class="form">
        <el-form-item>
          <el-input
            prefix-icon="el-icon-search"
            v-model="form.query"
            placeholder="请输入要搜索的用户账号"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="onSearch()">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div class="typeUsers">
        <el-tabs v-model="activeName" >
          <el-tab-pane label="普通用户管理" name="first">
            <div>
              <el-table :data="userData" style="width: 100%">
                <el-table-column prop="userId" label="用户账号" width="160"></el-table-column>
                <el-table-column prop="userUsername" label="用户名" ></el-table-column>
                <el-table-column prop="userName" label="真实姓名" ></el-table-column>
                <el-table-column prop="userCard" label="身份证号码"></el-table-column>
                <el-table-column prop="userBankCard" label="银行卡号" ></el-table-column>
                <el-table-column prop="userAddress" label="地 址"></el-table-column>
                <el-table-column prop="userPhone" label="联系电话" width="140"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column label="操 作" width="200">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      class="btnNot"
                    >编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-dialog title="请输入你要编辑的内容" width="40%" :visible.sync="dialogVisible">
              <el-form ref="form" :model="updateForm" label-width="90px">
                <el-form-item label="用户名">
                  <el-input v-model="updateForm.userUsername" clearable></el-input>
                </el-form-item>
                <el-form-item label="真实姓名">
                  <el-input v-model="updateForm.userName" clearable></el-input>
                </el-form-item>
                <el-form-item label="身份证号码">
                  <el-input v-model="updateForm.userCard" clearable></el-input>
                </el-form-item>
                <el-form-item label="银行卡号">
                  <el-input v-model="updateForm.userBankCard" clearable></el-input>
                </el-form-item>
                <el-form-item label="地 址">
                  <el-input v-model="updateForm.userAddress" clearable></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input v-model="updateForm.userPhone" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <div style="float:right;">
                    <el-button @click="btnNot()" class="btnNot">取 消</el-button>
                    <el-button type="warning" @click="queren()">确 认</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </el-dialog>
            <div style="margin-top:20px;">
              <el-pagination
                :current-page="currentUserPage"
                @current-change="handleCurrentUserChange"
                background
                layout="prev, pager, next"
                :total="userTotal"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商家用户管理" name="second">
            <div>
              <el-table :data="merchantData" style="width: 100%">
                <el-table-column prop="userId" label="用户账号" width="160"></el-table-column>
                <el-table-column prop="userUsername" label="用户名"></el-table-column>
                <el-table-column prop="userName" label="店铺名称" ></el-table-column>
                <el-table-column prop="userCard" label="身份证号码" ></el-table-column>
                <el-table-column prop="userBankCard" label="银行卡号" ></el-table-column>
                <el-table-column prop="userAddress" label="店铺地址"></el-table-column>
                <el-table-column prop="userPhone" label="联系电话" ></el-table-column>
                <el-table-column label="操 作" width="200">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit1(scope.$index, scope.row)"
                      class="btnNot"
                    >编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
             <el-dialog title="请输入你要编辑的内容" width="40%" :visible.sync="dialogVisible1">
              <el-form ref="form" :model="updateForm" label-width="90px">
                <el-form-item label="用户名">
                  <el-input v-model="updateForm.userUsername" clearable></el-input>
                </el-form-item>
                <el-form-item label="店铺名称">
                  <el-input v-model="updateForm.userName" clearable></el-input>
                </el-form-item>
                <el-form-item label="身份证号码">
                  <el-input v-model="updateForm.userCard" clearable></el-input>
                </el-form-item>
                <el-form-item label="银行卡号">
                  <el-input v-model="updateForm.userBankCard" clearable></el-input>
                </el-form-item>
                <el-form-item label="店铺地址">
                  <el-input v-model="updateForm.userAddress" clearable></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input v-model="updateForm.userPhone" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <div style="float:right;">
                    <el-button @click="btnNot1()" class="btnNot">取 消</el-button>
                    <el-button type="warning" @click="queren()">确 认</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </el-dialog>
            <div style="margin-top:20px;">
              <el-pagination
                :current-page="currentMerchantPage"
                @current-change="handleCurrentMerchantChange"
                background
                layout="prev, pager, next"
                :total="merchantTotal"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      userTotal: 0,
      merchantTotal: 0,
      currentUserPage: 1,
      currentMerchantPage: 1,
      activeName: "first",
      updateForm: {
        userUsername: "",
        userName: "",
        userCard: "",
        userBankCard: "",
        userAddress: "",
        userPhone: ""
      },
      form: {
        query: ""
      },
      userData: [
        {
          userId: "",
          userUsername: "",
          userName: "",
          userCard: "",
          userBankCard: "",
          userAddress: "",
          userPhone: ""
        }
      ],
      merchantData: [
        {
          userId: "",
          userUsername: "",
          userName: "",
          userCard: "",
          userBankCard: "",
          userAddress: "",
          userPhone: ""
        }
      ]
    };
  },
  methods: {
    onSearch(){
      let that = this;
      let userId = that.form.query;
      let userData=[];
      let merchantData=[];
      console.log(that.activeName)
      if(that.activeName=='first'){
      if(userId){
      that.$axios
        .post("/user/queryUserInfo?userId=" + userId, {})
        .then(function(response) {
          console.log(response);
          that.userTotal = 1;
          userData.push(response.data.data)//将后台返回的对象转换成数组
          that.userData = userData;
          
        }).catch(function(error) {
          console.log(error);
        });
        }else{
          that.userDataGet();
        }
      }else if(that.activeName=='second'){
         if(userId){
      that.$axios
        .post("/user/queryUserInfo?userId=" + userId, {})
        .then(function(response) {
          console.log(response);
          that.merchantTotal = 1;
          merchantData.push(response.data.data)//将后台返回的对象转换成数组
          that.merchantData = merchantData;
          
        }).catch(function(error) {
          console.log(error);
        });
        }else{
          
        }
      }
    },
    handleEdit(index, row) {
      let that = this;
      that.updateForm=row;
      console.log(index, row);
      that.dialogVisible = true;
    },
    handleEdit1(index, row) {
      let that = this;
      that.updateForm=row;
      that.dialogVisible1 = true;
    },
    queren() {
      let that = this;
      that.$axios
        .post("/user/userUpdateAll", {
          userId: that.updateForm.userId,
          userUsername: that.updateForm.userUsername,
          userName: that.updateForm.userName,
          userCard: that.updateForm.userCard,
          userBankCard: that.updateForm.userBankCard,
          userAddress: that.updateForm.userAddress,
          userPhone: that.updateForm.userPhone
        })
        .then(function(response) {
          console.log(response);
          alert("修改成功！");
          that.updateForm = {};
          that.userDataGet();
          that.merchantDataGet();
          that.dialogVisible = false;
          that.dialogVisible1 = false;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    handleDelete(index, row) {
      let that = this;
      let userId = row.userId;
      that.$axios
        .post("/user/userDelete?userId=" + userId, {})
        .then(function(response) {
          console.log(response);
          alert("删除成功！");
          window.location.reload(true);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    userDataGet() {
      let that = this;
      let page = that.currentUserPage;
      that.$axios
        .post(
          "/user/queryUsersInfoListByUserIsBussiness?page=" +
            page +
            "&userIsBussiness=0",
          {}
        )
        .then(function(response) {
          console.log(response)
          that.userTotal = response.data.data.records;
          that.userData = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    merchantDataGet() {
      let that = this;
      let page = that.currentMerchantPage;
      that.$axios
        .post(
          "user/queryUsersInfoListByUserIsBussiness?page=" +
            page +
            "&userIsBussiness=1",
          {}
        )
        .then(function(response) {
          that.merchantData = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    handleCurrentUserChange(val) {
      let that = this;
      that.currentUserPage = val;
      that.userDataGet();
    },
    handleCurrentMerchantChange(val) {
      let that = this;
      that.currentMerchantPage = val;
      that.merchantDataGet();
    },
    btnNot() {
      this.dialogVisible = false;
    },
     btnNot1() {
      this.dialogVisible1 = false;
    }
  },
  created() {
    let that = this;
    that.userDataGet();
    that.merchantDataGet();
  }
};
</script>
<style scoped>
.userManagement .input {
  width: 600px;
}
.userManagement >>> .el-tabs__active-bar {
  background-color: #e6a23c;
}
.userManagement >>> .el-tabs__item.is-active {
  color: #e6a23c;
}
.userManagement >>> .el-tabs__item:hover {
  color: #e6a23c;
}
.userManagement .btnNot:hover {
  color: #e6a23c;
  border-color: #e6a23c;
  background-color: #faf3e8;
}
.userManagement >>> .el-pager li:not(.disabled).active {
  background-color: #e6a23c;
}
.btnNot:hover {
  color: #e6a23c;
  border-color: #e6a23c;
  background-color: #faf3e8;
}
</style>